<template>
  <!-- 车主服务 -->
  <div class="box">
    <heads></heads>
    <div class="tit1">
      <div class="list">
        <div class="li" style="cursor: pointer" @click="() => {
          $router.push('/');
        }
          ">
          <img src="../../assets/logo.png" />
        </div>
        <div class="sousuo">
          <input type="text" v-model="searchtext" @keyup.enter="search" placeholder="请输入名称搜索服务" />
          <p class="el-icon-search" @click="search"></p>
        </div>
        <!-- <div class="but">下载帮帮同城app</div> -->
        <downloadAppBtn></downloadAppBtn>
      </div>
    </div>

    <!-- 这里应该有个轮播图 -->
    <transition name="fade">
      <div class="swiper-btn-control-wrap center" style="margin-left: 50%">
        <div class="swiper-btn-control btn-control1" @click.stop="prev">
          <span class="el-icon-arrow-left btn-control"></span>
        </div>
        <div class="swiper-btn-control btn-control2" @click.stop="next">
          <span class="el-icon-arrow-right btn-control"></span>
        </div>
        <div @touchend="end" @touchstart="start" @touchmove="move" class="swiper">
          <div v-for="(item, index) in imgs" :style="config5[index]" :key="'lb' + index" @mouseover="swiper = false"
            @mouseleave="swiper = true" class="swiperclass">
            <!--
          @click="chooseItem(item.id)"
          particulars(item, index) 
          -->
            <img v-if="item.type == 'image'" :src="item.image" style="width: 100%; height: 100%; cursor: pointer"
              @click.stop="previewImg(index, imgs)" />
            <video v-if="item.type == 'video'" controls :src="item.image" style="
                width: 100%;
                height: 100%;
                cursor: pointer;
                background: #aaa;
              "></video>
          </div>
          <div class="swiper-button-prev" @click="prev" style="color: '#64b6a8!important'"></div>
          <div class="swiper-button-next" @click="next" style="color: '#64b6a8!important'"></div>
        </div>
      </div>
    </transition>

    <div class="center">
      <div class="yhx">
        <div class="mingpai weigui-wrap">
          <div class="qian_top_right_item" @click.stop="collect(projectObj)">
            <img style="width: 30px; height: 30px" src="../../assets/shou3.png"
              v-if="projectObj.whetherCollection == '1'" />
            <img style="width: 30px; height: 30px" src="../../assets/shou2.png" v-else />
            <div>收藏服务</div>
          </div>
          <div class="weigui" v-if="weig" @click="weigui">
            <img class="img" src="@/assets/v3/new-weigui.png" />

            <p>该用户有{{ Count }}条违规信息！</p>
            <div>查看详情</div>
          </div>
          <div class="mingpai_item">
            <img class="mingpai_item_img pointer" style="cursor: pointer" :src="userInfo.image
              ? userInfo.image
              : 'https://pic.bangbangtongcheng.com/static/my/header.png'
              " @click="shopdetails(projectObj)" />
            <span class="mingpai_item_name pointer line1" style="width: 100px; cursor: pointer"
              @click="shopdetails(projectObj)">{{ (userInfo && userInfo.nikeName) || "未命名用户" }}</span>
            <!-- userInfo.id?userInfo.shop_name||userInfo.shopName||'未命名店铺':'' -->
            <!-- <span
                class="mingpai_item_sj line1"
                style="cursor: pointer"
                @click="shopdetails(projectObj)"
                >{{projectObj.storeName||'未命名店铺'}}</span> -->

            <div v-if="userInfo.id" class="vip-level" :style="{
              backgroundColor:
                $store.state.colors[userInfo.memberLevel - 1].bgColor,
              color: $store.state.colors[userInfo.memberLevel - 1].wordColor,
              borderColor:
                $store.state.colors[userInfo.memberLevel - 1].lineColor,
            }">
              {{ $store.state.colors[userInfo.memberLevel - 1].level }}
            </div>
          </div>

          <div class="but">
            <div class="but_2" @click="chat">
              <img src="@/assets/weixin_b.png" alt />
              <p>在线聊天</p>
            </div>
            <div class="but_1" @click="mouseoverPhone">
              <img src="@/assets/dianhua_lan.png" alt />
              <p>{{ phonestate ? userInfo.phone : "拨打电话" }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="info-code">信息编号：{{ projectObj.id }}</div>

      <div class="center_title">{{ projectObj.entryName }}</div>
      <div class="projectIntroduction">
        <div class="projectIntroduction_title">项目介绍</div>
        <div class="projectIntroduction_nr">
          {{ projectObj.entryDescription }}
        </div>
      </div>
      <div class="projectDetails">
        <div class="projectDetails_title">项目详情</div>
        <div class="projectDetails_nr">
          <template v-for="(item, index) in imgs">
            <img :src="item.url" alt="" :key="index" v-if="item.type == 'image'" @click="previewImg(index, imgs)"
              style="object-fit: cover" />
            <video controls :src="item.url" alt="" :key="index" v-if="item.type == 'video'"
              style="object-fit: contain"></video>
          </template>
        </div>
      </div>
      <div class="mzsm">
        {{ disclaimerContent }}
        <!-- 免责声明：帮帮同城旨在为广大用户提供更丰富的信息，但由于部分信息因时间、政策变化等因素，且信息审核会有滞后性，会导致部分信息更新不同步，与实际情况可能存在偏差，一切信息以发布方官宣为准。帮帮同城不对您交易过程中对本网站信息产生的依赖承担任何明示或默示的担保责任或任何责任。 -->
      </div>
    </div>
    <floor></floor>
    <chat ref="chats"></chat>
    <inform ref="inform" :bUserId="bUserId" :businessType="businessType"></inform>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import chat from "../../components/chat.vue";
import inform from "./inform";
export default {
  components: {
    floor,
    heads,
    chat,
    inform,
  },
  data() {
    return {
      imgList: [],
      HousesPage: {
        pageNo: 1,
        pageSize: 10,
        auditStatus: 2,
        keyword: "",
      },
      housesList: [],
      housesTotal: 0,
      xuanzhong: 0,
      quyuIndex: -1,
      priceIndex: -1,
      loucIndex: -1,
      mianjiIndex: -1,
      type2: [], //价格
      screenList: [], //选中的条件
      // 卡片轮播
      loading: true,
      currentIndex: 3, //当前中间imgs数组中index
      centerInfo: "", // 当前中间信息
      startX: "",
      endX: "",
      imgs: [],
      previous: 0,
      config5: [
        {
          id: "-A",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "0",
          opacity: 1,
          zIndex: 0,
          transition: ".4s",
        },
        {
          id: "A",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "8%",
          opacity: 1,
          zIndex: 1,
          transition: ".4s",
        },
        {
          id: "B",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "20%",
          opacity: 1,
          zIndex: 2,
          transition: ".4s",
        },
        {
          id: "center",
          position: "absolute",
          width: "360px",
          height: "240px",
          top: "0px",
          left: "calc(100% - 50% - 180px)",
          // marginLeft: "-22.5%",
          opacity: 1,
          zIndex: 4,
          transition: ".4s",
        },
        {
          id: "D",
          position: "absolute",
          width: "323px",
          height: "216px",
          top: "12px",
          left: "calc(100% - 20% - 323px)",
          opacity: 1,
          zIndex: 2,
          transition: ".4s",
        },
        {
          id: "E",
          position: "absolute",
          width: "290px",
          height: "193px",
          top: "23px",
          left: "calc(100% - 8% - 290px)",
          opacity: 1,
          zIndex: 1,
          transition: ".4s",
        },
        {
          id: "E+",
          position: "absolute",
          width: "243px",
          height: "163px",
          top: "38px",
          left: "calc(100% - 243px)",
          opacity: 1,
          zIndex: 0,
          transition: ".4s",
        },
      ],
      bannerList: [],
      searchtext: "",
      t1: "",
      swiper: true,
      projectObj: {},
      imgarr: [],
      weig: false,
      Count: "",
      qrCode: "",
      phonestate: false,
      userInfo: {},
      bUserId: "",
      businessType: "",
    };
  },
  mounted() {
    this.t1 = setInterval(() => {
      if (this.swiper) {
        this.next();
      }
    }, 4000);
  },

  beforeDestroy() {
    clearInterval(this.t1);
  },
  created() {
    this.getUser();
    this.init();
    this.getDisclaimers(12);
  },
  methods: {
    collect(item) {
      if (this.loginstate) {
        this.$postHttp(
          "/api/mobile/vehicleOwner/collectionOrCancelCollection",
          {
            collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
            collectionType: "5",
            relationId: item.id,
            id:
              item.collectionAttention && item.collectionAttention.id
                ? item.collectionAttention.id
                : "",
          }
        ).then((data) => {
          if (data.code == 200) {
            this.init(true);
            this.$message({
              message: data.msg,
              type: "success",
              offset: 120,
              duration: 2000,
            });
            if (item.whetherCollection == 0) {
              this.addIntegral(5, "收藏服务项目");
            }
          }
        });
      } else {
        this.$message({
          message: "请登录之后在收藏个人！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    //开启聊天
    chat() {
      console.log(this.loginstate);
      if (this.loginstate) {
        // console.log(this.userInfo.id, this.tHouseInfo.id);
        // return
        // this.$refs.chats.chatOpne(this.userInfo.id, this.tHouseInfo.id);
        this.chatcz(this.userInfo.id, this.projectObj.id, 3, 1);
      } else {
        this.$message({
          message: "请登录之后在聊天！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    mouseoverPhone() {
      if (this.loginstate) {
        this.phonestate = !this.phonestate;
        if (this.phonestate) {
          this.insertCallRecord({
            userId: this.projectObj.storeId,
            phone: this.userInfo.phone,
            businessType: 2,
            callType: 6,
          });
        }
      } else {
        this.$message({
          message: "请登录之后在查看电话！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    previewImg(i, img) {
      var imgarr = img
        .filter((item) => item.type == "image")
        .map((item) => item.url);

      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: i, // 多图预览，默认展示第二张图片
        imgList: imgarr, // 需要预览的多图数组
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
          browseRecordId: this.$route.query.id,
          viewersId: user.id,
          businessType: 2,
          browsingRecords: 6,
        }).then((res) => { });
      } else {
        this.loginstate = false;
      }
    },
    init(last=false) {
      //获取首页广告
      // this.$getHttp("/mob/home/getBanner", { type: 3 }).then((data) => {
      //   if (data.code == 200) {
      //     data.list.forEach((e) => {
      //       this.bannerList.push(e);
      //       this.imgs.push({
      //         index: e.sort - 1,
      //         cover: this.$img + e.image,
      //       });
      //     });
      //   }
      // });

      this.$getHttp("api/mobile/vehicleOwner/getOwnerServiceById", {
        id: this.$route.query.id,
        userId: localStorage.getItem("userInfo")
          ? JSON.parse(localStorage.getItem("userInfo")).id
          : "",
      }).then((data) => {
        if (data.code == 200) {
          this.projectObj = data.serviceItems;
          var arr = [];
          var picture = this.manageImg(data.serviceItems.projectPicture).map(
            (item) => {
              arr.push({
                type: "image",
                url: item,
                image: item,
              });
            }
          );
          console.log(this.manageImg(data.serviceItems.entryVideo));
          var video = this.manageImg(data.serviceItems.entryVideo).map(
            (item) => {
              arr.push({
                type: "video",
                url: item,
                image: item,
              });
            }
          );
          this.userInfo = data.serviceItems.userInfo;
          console.log(data, "查看出局");
          !last && this.getCount(this.userInfo.id);

          this.imgs = arr;
          this.addCardStyle();
          // console.log('imgsimgsimgsimgs',this.imgarr);
          // this.isCollection = data.isCollection
        }
      });

      // this.getBanner();
      // this.getDictionaries();
      // this.getBuildingsInfo();
      // this.getOneBanner();
    },
    // 判断是否有违规
    getCount(id) {
      let that = this;
      this.$getHttp("/mob/user/getReportMyRecord", {
        userId: id,
      }).then((res) => {
        this.Count = res.page.count;

        if (this.Count > 0) {
          that.weig = true;
          setTimeout(() => {
            that.weig = false;
          }, 3000);
        }
      });
    },
    weigui() {
      // this.reportInformation();
      // this.centerDialogVisible = true;

      this.bUserId = this.userInfo.id;
      this.businessType = this.userInfo.businessType;
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);
    },
    getBuildingsInfo() {
      this.$getHttp("/mob/user/getBuildingsInfo", this.HousesPage).then(
        (data) => {
          console.log(data);
          if (data.code == 200) {
            data.page.list.forEach((e) => {
              if (e.showImg) {
                e.showImg = this.$img + e.showImg.split("|")[0];
              }
            });
            console.log(data.page.list, "楼盘轮播");
            this.housesList = data.page.list;
            this.housesTotal = data.page.count;
            // data.list.forEach(e => {
            //   e.foors = this.floor(e.FLOOR)
            //   if(!e.hasOwnProperty("shop_name")){
            //     e.shop_name = "个人房源"
            //   }
            // });
            // this.housesList = data.list
            // this.housesTotal = data.count
          }
        }
      );
    },
    //查询字典(筛选条件)
    getDictionaries() {
      this.$getHttp("/api/mobile/vehicleOwner/queryDataDictionaryList", {
        type: "2",
      }).then((data) => {
        if (data.code == 200) {
          data.dataDictionaryList.forEach((e) => {
            if (e.type == 2) {
              this.screenList.push({
                type: 1,
                value: e.valueName,
                show: false,
              });
              this.type2.push(e);
            }
          });
        }
      });
    },

    //获取广告
    getBanner() {
      this.$getHttp("/mob/home/getBanner", { type: 11 }).then((data) => {
        if (data.code == 200) {
          data.list.forEach((e) => {
            this.bannerList.push(e);
            this.imgs.push({
              index: e.sort - 1,
              cover: this.$img + e.image,
            });
          });
        }
      });
    },
    search() {
      if (this.searchtext.trim() != "") {
        const routeLink = this.$router.resolve({
          // path: "/index/vehicleSeach?search=" + this.searchtext+"&index=3",
          path: "/index/newDealer?search=" + this.searchtext,
        });
        window.open(routeLink.href, "_self");
      }
    },
    titClick(index) {
      this.xuanzhong = index;
    },
    screenChuli(index, type, value) {
      let screen = this.screenList;
      this.screenList.forEach((e) => {
        if (e.type == type) {
          e.show = false;
        }
      });
      if (index != -1) {
        this.screenList.forEach((e) => {
          if (e.value == value) {
            e.show = true;
          }
        });
      }
      //this.screenList = screen
    },
    clear(item) {
      if (item == -1) {
        this.screenList.forEach((e) => {
          e.show = false;
        });
        this.priceIndex = -1;
        this.mianjiIndex = -1;
        this.loucIndex = -1;
        delete this.HousesPage.price;
        delete this.HousesPage.area;
        delete this.HousesPage.floor;
      } else {
        this.screenList.forEach((e) => {
          if (e.type == item.type) {
            e.show = false;
          }
        });
        if (item.type == 1) {
          this.priceIndex = -1;
          delete this.HousesPage.price;
        }
        if (item.type == 2) {
          this.mianjiIndex = -1;
          delete this.HousesPage.area;
        }
        if (item.type == 3) {
          this.loucIndex = -1;
          delete this.HousesPage.floor;
        }
      }
      this.HousesPage.pageNo = 1;
      this.getBuildingsInfo();
    },
    details(item) {
      this.openUrl({
        path: "/index/ownerServiceDetails",
        query: {
          id: item.id,
        },
      });
    },
    // quyuClick(item) {
    // 	this.HousesPage.pageNo = 1
    // 	if(item!=-1){
    // 		this.quyuIndex = item.valueNum;
    // 		this.HousesPage.region = item.valueNum
    // 		this.getBuildingsInfo()
    // 		return;
    // 	}
    // 	this.quyuIndex = item
    // 	delete this.HousesPage.region
    // 	this.getBuildingsInfo()
    // },
    priceClick(item) {
      this.HousesPage.pageNo = 1;
      this.screenChuli(1, 1, 0);
      if (item != -1) {
        this.screenChuli(1, 1, item.valueName);
        this.priceIndex = item.valueNum;
        this.HousesPage.price = item.valueName;
        this.getBuildingsInfo();
        return;
      }
      this.priceIndex = item;
      delete this.HousesPage.price;
      this.getBuildingsInfo();
    },
    shopdetails(item) {
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: this.userInfo.id,
        },
      });
    },
    toAgent(userInfo) {
      this.openUrl({
        path: "/index/goldConsultant",
        query: {
          id: userInfo.id,
        },
      });
    },
    mianjiClick(item) {
      this.HousesPage.pageNo = 1;
      this.screenChuli(2, 2, 0);
      if (item != -1) {
        this.screenChuli(2, 2, item.valueName);
        this.mianjiIndex = item.valueNum;
        this.HousesPage.area = item.valueName;
        this.getBuildingsInfo();
        return;
      }
      this.mianjiIndex = item;
      delete this.HousesPage.area;
      this.getBuildingsInfo();
    },
    loucClick(item) {
      this.HousesPage.pageNo = 1;
      this.screenChuli(3, 3, item.valueName);
      if (item != -1) {
        this.screenChuli(3, 3, item.valueName);
        this.loucIndex = item.valueNum;
        this.HousesPage.floor = item.remarks;
        this.getBuildingsInfo();
        return;
      }
      this.loucIndex = item;
      delete this.HousesPage.floor;
      this.getBuildingsInfo();
    },
    async getData() {
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 滑动上一个
    prev(index) {
      // this.imgs.unshift(this.imgs.pop());
      this.config5.push(this.config5.shift());
      this.currentIndex = this.currentIndex - 1;
      if (this.currentIndex < 0) {
        this.currentIndex = this.imgs.length - 1;
      }
      this.centerCard();
      this.centerIndex("prev");
    },
    // 滑动下一个
    next() {
      // this.imgs.push(this.imgs.shift());
      this.config5.unshift(this.config5.pop());
      this.currentIndex = this.currentIndex + 1;
      if (this.currentIndex > this.imgs.length - 1) {
        this.currentIndex = 0;
      }
      this.centerCard();
      this.centerIndex("next");
      // console.log(this.currentIndex);
    },
    // 开始移动端滑动屏幕
    start(event) {
      this.startX = event.changedTouches[0].clientX;
      this.startY = event.changedTouches[0].clientY;
    },
    // 连续滑动
    move(event) {
      this.endY = event.changedTouches[0].clientY;
      this.endX = event.changedTouches[0].clientX;
      this.stopDefault(event);
      // 如果是滑动，注解（223行到231行）这段。如果是连续滑动，放开（223行到231行）注解
      this.interval = this.endX - this.startX;
      if (this.interval > 40) {
        this.startX = this.endX;
        this.prev();
      }
      if (this.interval < -40) {
        this.startX = this.endX;
        this.next();
      }
    },
    // 滑动
    end(event) {
      // 如果是滑动，放开（236行到238行）的注解。如果是连续滑动，注解（236行到238行）
      // this.endY = event.changedTouches[0].clientY;
      // this.endX = event.changedTouches[0].clientX;
      // this.formatSwiper();
    },
    formatSwiper() {
      if (this.startX > this.endX) {
        console.log("左边滑动");
        if (this.startX > this.endX + 40) {
          this.next();
        }
      } else {
        console.log("右边滑动");
        if (this.endX > this.startX + 40) {
          this.prev();
        }
      }
    },
    // 阻止touchmove的横向默认事件（ios快捷操作会关闭页面）
    stopDefault(event) {
      let differenceY = this.endY - this.startY;
      let differenceX = this.endX - this.startX;
      if (Math.abs(differenceX) > Math.abs(differenceY)) {
        event.preventDefault();
      }
    },
    // 当前imgs在位置上的index（并非img数组的index）
    centerIndex(val) {
      if (val == "prev") {
        for (let val of this.imgs) {
          if (val.index == this.imgs.length - 1) {
            val.index = 0;
          } else {
            val.index = val.index + 1;
          }
        }
      } else {
        for (let val of this.imgs) {
          if (val.index == 0) {
            val.index = this.imgs.length - 1;
          } else {
            val.index = val.index - 1;
          }
        }
      }
    },
    // 点击
    chooseItem(item, index) {
      this.bannerList.forEach((el) => {
        if (item.cover == this.$img + el.image) {
          localStorage.setItem("banner", JSON.stringify(el));
          // this.openUrl({
          //   path: "/index/particulars",
          //   query: {
          // 		type:'banner'
          //   },
          // });
          const routeLink = this.$router.resolve({
            path: "/index/particulars?type=banner",
          });
          window.open(routeLink.href, "_blank");
        }
      });
      //   let cycles = item.index;
      //   if (item.index < 3) {
      //     for (let i = 0; i < 3 - cycles; i++) {
      //       console.log(item.index);
      //       this.prev();
      //     }
      //     console.log("1");
      //   } else if (item.index > 3) {
      //     for (let i = -1; i < item.index - 3; i++) {
      //       this.next();
      //     }
      //     console.log("2");
      //   } else if (item.index == 3) {
      //     console.log("3");
      // 		this.imgs.forEach((e) =>{
      // 			if(e.index == 3){
      // 				this.bannerList.forEach((el) =>{
      // 					if(e.cover == (this.$img+el.image)){
      // 						localStorage.setItem("banner",JSON.stringify(el))
      // 						this.openUrl({
      // 						  path: "/index/particulars",
      // 						  query: {
      // 								type:'banner'
      // 						  },
      // 						});
      // 					}
      // 				})
      // 			}
      // 		})
      //   }
    },
    // 计算中间卡片信息
    centerCard() {
      this.centerInfo = this.imgs[this.currentIndex];
      this.$emit("centerInfo", this.centerInfo);
      // this.$emit('centerInfo', this.centerInfo);
      // console.log(this.imgs[2].id);
    },
    toBanner(item) {
      localStorage.setItem("banner", JSON.stringify(item));
      this.openUrl({
        path: "/index/particulars",
        query: {
          type: "banner",
        },
      });
    },
    addCardStyle() {
      if (this.imgs.length > 7) {
        let addtime = this.imgs.length - 7;
        for (let i = 0; i < addtime; i++) {
          console.log("add");
          this.config5.push({
            id: "center",
            position: "absolute",
            width: "45%",
            height: "100%",
            top: "0px",
            left: "50%",
            marginLeft: "-22.5%",
            opacity: 0,
            transition: ".1s",
          });
        }
      }
    },
    HousesCurrentChange(e) {
      this.scrollToElement(document.querySelector(".bottom"));
      this.HousesPage.pageNo = e;
      this.getBuildingsInfo();
    },
  },
};
</script>
<style lang="less" scoped>
.info-code {
  // position: absolute;
  //   left: 20px;
  //   top: 12px;
  font-size: 16px;
  font-weight: 400;
  color: #64b6a8;
  margin-top: -12px;
  margin-bottom: 12px;
}

.box {
  position: relative;
  padding-bottom: 200px;
}

.swiperclass {
  margin-top: 10px;
  // box-shadow: rgba(181, 181, 181, 0.3) 0px 10px 16px 0px;
  box-shadow: 0px 0px 10px 8px rgba(181, 181, 181, 0.3);
  // border: 2px solid rgb(214, 210, 210);
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.center {
  width: 1200px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
  position: relative;

  .center_title {
    font-size: 30px;
    font-weight: 600;
    color: #64b6a8;
  }

  .projectIntroduction {
    margin-top: 40px;
    margin-bottom: 40px;
    min-height: 96px;

    .projectIntroduction_title {
      font-size: 26px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 30px;
    }

    .projectIntroduction_nr {
      word-break: break-all;
      font-size: 22px;
      font-weight: 400;
      color: #333333;
    }
  }

  .projectDetails {

    // margin-top: 40px;
    .projectDetails_title {
      font-size: 26px;
      font-weight: 600;
      color: #333333;
      margin-bottom: 30px;
    }

    .projectDetails_nr {
      margin: 0 40px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      video,
      img {
        width: 525px;
        height: 260px;
        margin-bottom: 30px;
      }
    }
  }

  .mzsm {
    font-size: 12px;
    font-weight: 400;
    color: #999999;
    margin-top: 50px;
  }
}

.yhx {
  position: absolute;
  right: 0;
  transform: translateY(-50px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 43px 6px;

  .mingpai {
    margin-top: 12px;
    position: relative;
    display: flex;
    flex-direction: column;

    // align-items: center;
    .qian_top_right_item {
      cursor: pointer;
      // width: 50px;
      height: 45px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #333;
      font-size: 14px;
      margin-bottom: 32px;
    }

    .weigui {
      position: absolute;
      padding: 0px 10px 0px 10px;
      width: 300px;
      left: 7px;
      bottom: 131px;

      .img {
        width: 100%;
        height: 134rpx;
      }

      p {
        position: absolute;
        left: 50px;
        bottom: 26px;
        font-size: 16px;
        color: #fff;
      }
    }

    .mingpai_item {
      display: flex;
      align-items: center;

      .mingpai_item_img {
        width: 48px;
        height: 48px;
        border-radius: 48px;
      }

      .mingpai_item_name {
        font-size: 18px;
        font-weight: 400;
        color: #333333;
        margin-left: 14px;
        margin-right: 14px;
      }

      .mingpai_item_sj {
        height: 24px;
        background-color: #ffffff;
        border-radius: 4px;
        border: 1px solid #64b6a8;
        font-size: 14px;
        font-weight: 400;
        color: #64b6a8;
        padding: 2px 5px;
        line-height: 24px;
        margin-right: 14px;
        max-width: 100px;
      }
    }

    .lxfs {
      display: flex;
      padding-left: 62px;
      margin-top: 17px;

      .lxfs-item {
        position: relative;

        .lxfs-item-phone {
          position: absolute;
          bottom: o;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      img {
        cursor: pointer;
        width: 33px;
        height: 33px;
      }
    }
  }

  .saoma {
    display: flex;
    flex-direction: column;
    align-items: center;

    .saoma_img {
      width: 90px;
      height: 90px;
      margin-bottom: 6px;
    }

    .saoma_span {
      font-size: 12px;
      font-weight: 400;
      color: #333333;
    }
  }
}

.swiper {
  position: relative;
  width: 1200px;
  height: 270px;
  overflow: hidden;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 50px;
}

/deep/.swiper-button-prev,
.swiper-button-next {
  color: #64b6a8;
}

.vip-level {
  width: 80px;
  text-align: center;
  padding: 4px 0;
  border: 1px solid;
  border-radius: 4px 4px 4px 4px;
}

.but {
  margin-top: 32px;

  div {
    position: relative;
    display: inline-block;
    //width: 153px;
    height: 51px;
    border-radius: 4px;
    overflow: hidden;
    text-align: center;
    line-height: 51px;
    text-indent: 50px;
    color: #fff;
    margin-right: 15px;

    img {
      position: absolute;
      width: 33px;
      height: 33px;
      top: 9px;
      left: 25px;
    }
  }

  p {
    margin-left: 10px;
  }

  .but_1 {
    cursor: pointer;
    padding-right: 20px;
    background: rgba(100, 182, 168, 0.14);
    color: #64b6a8;
  }

  .but_2 {
    cursor: pointer;
    padding-right: 20px;
    background: #64b6a8;
  }
}
</style>
